{include file="public/head"/}

<style>
    .tabcon {
        height: 200px;
        overflow: auto;
    }
</style>
<div class="container-fluid" style="width: 99%;">

    <div class="row clearfix">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div class="alert alert-dismissable alert-info" id="headeralert">
                    <button type="button" class="close">×</button>
                    <p></p>
                </div>
            </div>
        </div>
    </div>


    <div class="ntDesktop">
        <div class="ntDesktop-head">{:lang("payment_registration")}</div>
        <div class="row input-panel">
            <div :class="contract.length ? 'col-md-3' : 'col-md-9'">
                <div class="row">
                    <div class="col-md-5">
                        <label>{:lang('date')}<span class="required"></span></label>
                        <div class="input-group date form_datetime"  data-link-field="workdate">
                            <input class="form-control text-center" ref="fkdate" :value="data.happen_day" id="seldate" type="text">
                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"
                                                                  style="margin:0"></span></span>
                        </div>
                    </div>
                    <input type="hidden" id="workdate"/>
                    <div class="col-md-7">
                        <label>{:lang("payment_account")}<span class="required"></span></label>
                        <select class="form-control" v-model="data.account_id" v-cloak>
                            <option value="">{:lang('please_select')}</option>
                            <option :value="item.id" v-for="(item,key) in accountins">
                                {{item.name}}/{{item.bankname}}/{{item.account_num}}
                            </option>
                        </select>
                    </div>
                </div>
                <div>
                    <label>{:lang('search')}<span class="required"></span></label>
                    <div class="input-group">
                        <input type="text" v-model="searchText" class="form-control"
                               placeholder="搜索公司">
                        <div class="input-group-btn">
                            <button @click="search" type="button" class="btn btn-default">
                                <span class="fa fa-search"></span>{:lang('search')}
                            </button>
                        </div>
                    </div>
                </div>
                <div>
                    <label>{:lang("company")}<span class="required"></span></label>
                    <select class="form-control" v-model="data.co_id" @change="changecompany" v-cloak>
                        <option value="">{:lang('please_select')}</option>
                        <option :value="item.id" v-for="(item,key) in companys">{{item.name}}</option>
                    </select>
                </div>

                <div>
                    <label>{:lang("company_account")}<span class="required"></span></label>
                    <select class="form-control" v-model="data.bank_id">
                        <option value="">{:lang('please_select')}</option>
                        <option :value="item.id" v-for="(item,key) in companyacc">
                            {{item.name}}/{{item.bankname}}/{{item.account_num}}&nbsp;&nbsp;&nbsp;{{item.is_mains}}
                        </option>
                    </select>
                </div>

                <div>
                    <label>{:lang('remark')}</label>
                    <input type="text" class="form-control" v-model="data.remarks">
                </div>

            </div>
            <div class="col-md-7" v-if="contract.length">
                <div>
                    <label>选择合同<span class="required"></span></label>
                    <input type="hidden" id="po_id" value="{$po_id|default=''}">
                </div>
                <div class="div-scroll">
                    <table class="table" style="margin-bottom: 0;">
                        <colgroup>
                            <col width="72">
                            <col width="144">
                            <col width="180">
                            <col width="180">
                            <col width="180">
                        </colgroup>
                        <thead>
                        <tr>
                            <th align="center"><input type="checkbox" @click="allche" v-model="allsel"></th>
                            <th>合同号</th>
                            <th>交货日期</th>
                            <th>{:lang("payment_date")}</th>
                            <th>应付金额</th>
                            <th>付款金额</th>
                            <th>{:lang("operate")}</th>
                        </tr>
                        </thead>
                    </table>
                    <div class="tabcon">
                        <table class="table" v-cloak>
                            <colgroup>
                                <col width="72">
                                <col width="144">
                                <col width="180">
                                <col width="180">
                                <col width="180">
                            </colgroup>
                            <tbody>
                            <template v-for="(item,index) in contract">
                                <tr  v-for="(childem,key) in item.paypoarr">
                                    <td style="vertical-align:middle"><input type="checkbox" @change="seltedfun(index,key)" v-model="contract[index].paypoarr[key].check"></td>
                                    <td style="vertical-align:middle">{{key==0 ? formatUnit(item.id,'ID'):''}}</td>
                                    <td style="vertical-align:middle" >{{key==0 ? item.delivery_day:''}}</td>
                                    <td style="vertical-align:middle" >{{childem.pay_day}}</td>
                                    <td class="text-right">{{formatUnit(childem.amount,'CNY')}} <span class="unit">CNY</span></td>
                                    <td>
                                        <input type="number" class="form-control text-right" style="width:8em" @input="compon" v-model="contract[index].paypoarr[key].price">
                                    </td>
                                    <td>
                                        <button class="btn btn-sm btn-primary" @click="getBuyPoInfo(item.id)" data-toggle="modal" data-target="#po_detailModal"  v-if="key==0">
                                            <span class="fa fa-search-plus"></span>合同详情
                                        </button>
                                    </td>
                                </tr>
                                <tr v-if="item.cost_list && JSON.stringify(item.cost_list) != '{}'">
                                    <td style="vertical-align:middle"><input type="checkbox"  @change="seltedfun" v-model="contract[index].cost_list.check"></td>
                                    <td style="vertical-align:middle">{{item.paypoarr.length==0 ? item.id : ''}}</td>
                                    <td style="vertical-align:middle" >{{item.paypoarr.length==0 ? item.delivery_day : ''}}</td>
                                    <td style="vertical-align:middle" >{{item.cost_list.pay_day}}</td>
                                    <td style="vertical-align:middle">{{formatUnit(item.cost_list.amount,'$')}} <span class="unit">CNY</span></td>
                                    <td><input type="number" class="form-control text-right" style="width:8em" @input="compon" v-model="contract[index].cost_list.price"></td>
                                    <td>
                                        <button class="btn btn-sm btn-primary" data-toggle="modal"  @click="getBuyPoInfo(item.id)" data-target="#po_detailModal" v-if="item.paypoarr.length==0">
                                            <span class="fa fa-search-plus"></span>合同详情
                                        </button>
                                    </td>
                                </tr>
                            </template>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div :class="contract.length ? 'col-md-2' : 'col-md-3'" style="padding-top:3em">
                <div>
                    <label>{:lang("total_amount_payable")}</label>
                    <div style="float: right;" v-cloak>
                        {{formatUnit(comsum.withsum,'$')}}
                        <span class="unit">CNY</span>
                    </div>
                </div>
                <div style="padding-top:1em">
                    <label>{:lang("total_payment_amount")}</label>
                    <div  style="float: right;" v-cloak>
                        {{formatUnit(comsum.hassum,'$')}}
                        <span class="unit">CNY</span>
                    </div>
                </div>
                <div style="padding-top:1em">
                    <label style="line-height: 2.4;">{:lang("payment_amount")}<span class="required"></span></label>
                    <input type="number" v-model="data.amount" class="form-control text-right" style="width: 70%;float: right;;" >
                </div>
                <div class="text-right" style="padding-top:3em">
                    <button v-if="adminauth_ids.indexOf(184)!=-1 || adminauth_ids.indexOf(397)!=-1 ||adminauth_ids.indexOf(399)!=-1 || adminauth_ids.indexOf(185)!=-1" type="button" class="btn btn-primary" :disabled="isdisadble" @click="savefun">
                        <span class="glyphicon glyphicon-floppy-disk"></span> {:lang('save')}
                    </button>
                </div>
            </div>
        </div>


        <div class="row clearfix" style="margin-top: 20px;">
            <div class="col-md-4">
                <ul class="nav nav-tabs">
                    <li class="active" id="tab-payable" @click="changepay(1)">
                        <a href="#payable-list" data-toggle="tab">{:lang("item_payable")}</a>
                    </li>
                    <li @click="changepay(0)">
                        <a href="#paid-list" data-toggle="tab">{:lang("payment_flow")}</a>
                    </li>
                </ul>
            </div>
            <div class="col-md-5" >
                <ul class="pagination" style="margin:10px 0;" v-cloak>
                    <li @click="changedate(-1,true)"><a href="javascript:;">&laquo;</a></li>
                    <li :class="{active:index==0}" v-for="(item,index) in date" @click="changedate(index,true)"><a
                            href="javascript:;">{{item.splyear+'-'+item.month}}</a></li>
                    <li @click="changedate(1,true)"><a href="javascript:;">&raquo;</a></li>
                </ul>
            </div>
            <div class="col-md-3 text-right" style="padding:0.5em 1em;">
                <div>
                    <button type="button" class="btn btn-primary" id="btn-pay" @click="mergepay">
                        <span class="fa fa-dollar-sign"> {:lang("consolidated_payment")}</span>
                    </button>
                    <button type="button" class="btn btn-default btn-checkbox" @click="changmodal">
                        <input type="checkbox"> {:lang("hide_input_box")}
                    </button>
                </div>
            </div>
        </div>

        <div class="row tab-content" v-if="isshow">
            <div class="col-md-12 tab-pane in" id="paid-list">
                <table class="table table-striped table-hover ntTable" v-cloak>
                    <thead>
                    <tr>
                        <th class="sorting"  @click="sortfun(1)" data-order="1">{:lang("date")}</th>
                        <th> {:lang("company")}</th>
                        <th class="sorting text-center"  @click="sortfun(2)" data-order="1"> {:lang('amount')}</th>
                        <th> {:lang("corresponding_contract")}</th>
                        <th> {:lang('remark')}</th>
                        <th class="sorting"  @click="sortfun(3)" data-order="1"> {:lang('edit')}</th>
                        <th style="text-align: center;"> {:lang('operate')}</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(item ,i) in list" :key="item.id" v-if="list.length>0">
                        <td>{{item.happen_date}}</td>
                        <td><a :href="'/admin/customer/companycheck?tab=detail&company_id='+item.co_id">{{item.companyname}}</a></td>
                        <td class="text-right"><span class="red">{{formatUnit(item.amount,'$')}}</span> <span class="unit">CNY</span>
                        </td>
                        <td v-html="item.agreement"></td>
                        <td>&nbsp;</td>
                        <td> {{item.updatename}} <br/>
                            <small>{{item.update_date}}</small>
                        </td>
                        <td class="text-right">
                            <div>
                                <a v-if="adminauth_ids.indexOf(186)!=-1" v-cloak :href="'/admin/finance/cotwobuydetails?id='+item.id" type="button"
                                   class='btn btn-sm btn-primary' data-toggle="modal"
                                   data-target="#pay_detailModal"><span class="fa fa-search-plus"></span> {:lang('details')}</a>

                                <!--更改当天、7天 所有-->
                                <button v-if="(adminauth_ids.indexOf(184)!=-1&& item.time-item.happen_day < 86400) ||(adminauth_ids.indexOf(397)!=-1&& item.time-item.happen_day < 604800) || adminauth_ids.indexOf(399)!=-1" @click="editdata(item.id)" class='btn btn-sm btn-primary'><span
                                        class="glyphicon glyphicon-pencil"></span>
                                    {:lang('edit')}
                                </button>

                                <!--删除当天、7天-->
                                <a  v-if="item.del_at==0 && ((adminauth_ids.indexOf(187)!=-1&& item.time-item.happen_day < 86400) ||(adminauth_ids.indexOf(398)!=-1&& item.time-item.happen_day < 604800) || adminauth_ids.indexOf(400)!=-1)" href="#" class='btn btn-sm btn-default option-del'
                                   @click.prevent="delcotwo(item.id,item.companyname,1)"><span
                                        class="glyphicon glyphicon-trash"></span>{:lang('delete')}</a>

                                <a v-if="item.del_at>0 && ((adminauth_ids.indexOf(187)!=-1&& item.time-item.happen_day < 86400) ||(adminauth_ids.indexOf(398)!=-1&& item.time-item.happen_day < 604800) || adminauth_ids.indexOf(400)!=-1)" href="#" class='btn btn-sm btn-danger option-clear'
                                   @click.prevent="delcotwo(item.id,item.companyname,2)"><span
                                        class="glyphicon glyphicon-fire"></span>{:lang('clear')}</a>
                            </div>
                        </td>
                    </tr>
                    <tr style="text-align: center;" v-if="list.length==0">
                        <td colspan="7" class="no_date">{:lang('no_data')}</td>
                    </tr>
                    </tbody>
                    <tfoot>
                    <tr>
                        <td>&nbsp;</td>
                        <td align="right">支出合计</td>
                        <td><span class="red b">{{formatUnit(sumoney,'$')}}</span> <span class="unit">CNY</span></td>
                        <td colspan="4">&nbsp;</td>
                    </tr>
                    </tfoot>
                </table>
                <div class="col-md-12">
                    <ul class="pagination" id="pagination" v-show="list.length!=0">
                    </ul>
                </div>

            </div>

            <div class="tab-pane active" id="payable-list">
                <div class="col-md-12">
                    <table class="table table-striped table-hover ntTable" v-cloak>
                        <thead>
                        <tr>
                            <th>&nbsp;</th>
                            <th> {:lang("company")}</th>
                            <th> 合同号</th>
                            <th> 交货日期</th>
                            <th> {:lang("payment_date")}</th>
                            <th> 应付金额</th>
                            <th> 已付金额</th>
                            <th> 差额</th>
                            <th> {:lang('operate')}</th>
                        </tr>
                        </thead>
                        <tbody>
                        <template v-for="(obj,keyname,indexval) in Should">
                            <template v-for="(item,index) in obj">
                                <tr v-for="(childen,key) in item.paypoarr">
                                    <td align="center"><input type="checkbox" @click="banck(item,childen,false,$event)">
                                    </td>
                                    <td><a :href="'/admin/customer/companycheck?company_id='+item.company_id+'&tab=detail'" v-if="
                                            index==0 && key==0">{{keyname}}</a></td>
                                    <td> {{key==0 ? formatUnit(item.id,'ID') : ''}}</td>
                                    <td> {{key==0 ? item.delivery_day : ''}}</td>
                                    <td> {{childen.pay_day}}</td>
                                    <td  class="text-right">
                                        <span class="red">{{formatUnit(childen.amount,'$')}}</span>
                                        <span class="unit">CNY</span>
                                    </td>
                                    <td  class="text-right">
                                        <span class="green">{{formatUnit(childen.paid,'$')}}</span>
                                        <span class="unit">CNY</span>
                                    </td>
                                    <td  class="text-right">
                                        <span class="blue">{{formatUnit(childen.amount-childen.paid,'$')}}</span>
                                        <span class="unit">CNY</span>
                                    </td>
                                    <td class="text-right">
                                        <div>
                                            <button class='btn btn-sm btn-default' @click="payfun(item,childen,false,$event)"
                                                    :disabled="!(childen.amount-childen.paid)">
                                                <span class="fa fa-dollar-sign"></span> {{!(childen.amount-childen.paid) ? '已付清' : '付款'}}
                                            </button>
                                            <button class='btn btn-sm btn-primary' data-toggle="modal"  @click="getBuyPoInfo(item.id)" data-target="#po_detailModal" v-if="key==0"><span
                                                    class="fa fa-search-plus"></span> 合同详情
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                <!-- <template v-if="item.cost_list.amount">
                                    <tr>
                                        <td align="center">
                                            <input type="checkbox" @click="banck(item,item.cost_list,true,$event)">
                                        </td>
                                        <td></td>
                                        <td>{{item.paypoarr.length==0 ? item.id : ''}}</td>
                                        <td>{{item.paypoarr.length==0 ? item.delivery_day : ''}}</td>
                                        <td> {{item.cost_list.pay_day}}</td>
                                        <td  class="text-right">
                                            <span class="red">{{formatUnit(item.cost_list.amount,'$')}}</span>
                                            <span class="unit">CNY</span>
                                        </td>
                                        <td  class="text-right">
                                            <span class="green">{{formatUnit(item.cost_list.paid,'$')}}</span>
                                            <span class="unit">CNY</span>
                                        </td>
                                        <td  class="text-right">
                                            <span class="blue">{{formatUnit(item.cost_list.amount-item.cost_list.paid,'$')}}</span>
                                            <span class="unit">CNY</span>
                                        </td>
                                        <td class="text-right">
                                            <div>
                                                <button class='btn btn-sm btn-default'
                                                        @click="payfun(item,item.cost_list,true,$event)" v-if="item.cost_list.amount-item.cost_list.paid"><span
                                                        class="fa fa-dollar-sign"></span> {:lang('payment')}
                                                </button>
                                                <button class='btn btn-sm btn-primary' data-toggle="modal"  @click="getBuyPoInfo(item.id)" data-target="#po_detailModal" v-if="item.paypoarr.length==0"><span
                                                        class="fa fa-search-plus"></span> 合同详情
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                </template> -->
                            </template>
                        </template>
                        </tbody>
                        <tfoot>
                        <tr>
                            <td>&nbsp;</td>
                            <td colspan="4" class="text-right">{:lang("total_payable")}</td>
                            <td><span class="red b">{{formatUnit(sum.Shouldsum,'$')}}</span> <span class="unit">CNY</span></td>
                            <td colspan="2">&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                            <td colspan="5" class="text-right">{:lang("total_paid")}</td>
                            <td><span class="green b">{{formatUnit(sum.alreadysum,'$')}}</span> <span class="unit">CNY</span></td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                            <td colspan="6" class="text-right">差额合计</td>
                            <td><span class="blue b">{{formatUnit(sum.betweensum,'$')}}</span> <span class="unit">CNY</span></td>
                            <td>&nbsp;</td>
                        </tr>
                        </tfoot>
                    </table>

                    <div class="col-md-12">
                        <ul class="pagination" id="pagshowination"></ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- 采购合同详情 -->
        <div class="modal fade" id="po_detailModal" tabindex="-2" role="dialog" aria-labelledby="ntModalLabel" aria-hidden="true"  data-backdrop="static" data-keyboard="false" style="width: 80vw">
            <div class="modal-dialog modal-lg">
                <div class="modal-content" style="width:1000px">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="ntModalLabel">采购合同详情</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-12">
                                <ul class="nav nav-tabs">
                                    <li class="active">
                                        <a href="#po_base" data-toggle="tab">{:lang('basic_information')}</a>
                                    </li>
                                    <li>
                                        <a href="#po_detail" data-toggle="tab">采购内容</a>
                                    </li>
                                    <li>
                                        <a href="#po_pack" data-toggle="tab">{:lang("packing_content")}</a>
                                    </li>
                                    <li>
                                        <a href="#po_finance" data-toggle="tab">财务信息</a>
                                    </li>
                                    <li>
                                        <a href="#po_terms" data-toggle="tab">{:lang("contract_terms")}</a>
                                    </li>
                                    <li>
                                        <a href="#po_log" data-toggle="tab">{:lang("operation_record")}</a>
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <div class="tab-content row">
                            <div class="tab-pane col-md-12 active" id="po_base">
                                <table class="table table-striped" v-cloak>
                                    <thead>
                                    <tr>
                                        <th colspan="2">{:lang('basic_information')}</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>合同编号</td>
                                        <td> {{formatUnit(buy_poInfo.id,'ID')}} </td>
                                    </tr>
                                    <!-- <tr>
                                        <td>合同类型</td>
                                        <td> {{buy_poInfo.is_item}} </td>
                                    </tr> -->
                                    <tr>
                                        <td>{:lang("supplier")}</td>
                                        <td><a  :href="'/admin/customer/companycheck?company_id='+buy_poInfo.company_id+'&tab=detail'" target="_blank">{{buy_poInfo.company_name}}</a></td>
                                    </tr>
                                    <tr>
                                        <td>交货日期</td>
                                        <td>{{buy_poInfo.delivery_day}}</td>
                                    </tr>
                                    <tr>
                                        <td>{:lang("delivery_address")}</td>
                                        <td>{{buy_poInfo.port_name}}</td>
                                    </tr>
                                    <tr>
                                        <td>{:lang('contact')}</td>
                                        <td>{{buy_poInfo.linkname}} / {{buy_poInfo.linkman_method}}</td>
                                    </tr>
                                    <tr>
                                        <td>{:lang('status')}</td>
                                        <td> {{ buy_poInfo.status_name}}</td>
                                    </tr>
                                    <tr>
                                        <td>{:lang('edit')}</td>
                                        <td> {{buy_poInfo.create_name}} / {{buy_poInfo.create_time}} </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>

                            <!-- 采购内容 -->
                            <div class="tab-pane col-md-12" id="po_detail">
                                <div class="div-scroll" style="max-height:50vh">
                                    <table class="table table-striped" v-cloak>
                                        <thead>
                                        <tr>
                                            <th>No.</th>
                                            <th>&nbsp;</th>
                                            <th>{:lang("product")}</th>
                                            <th>{:lang("quantity")}</th>
                                            <th>{:lang("box_measure")}</th>
                                            <th>{:lang("volume")}/{:lang("weight")}</th>
                                            <th>{:lang('amount')}</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr v-for="(item_plan,index_plan) in buy_poInfo.buy_plan">
                                            <td style="vertical-align:middle" align="center">{{formatUnit(item_plan.pro_id,'ID')}}</td>
                                            <td style="vertical-align:middle" align="center">
                                                <a  :href="'/admin/product/productDetail?request=detail&id='+item_plan.pro_id" target="_blank"><img :src="item_plan.img_url" border="0"></a>
                                            </td>
                                            <td>
                                                <small> {{(item_plan.brand_name ? item_plan.brand_name :'')+ (item_plan.model ? ' / '+item_plan.model :'')}}
                                                </small><br />
                                                <a :href="'/admin/product/productDetail?request=detail&id='+item_plan.pro_id" target="_blank">{{item_plan.pro_name}}</a>
                                            </td>
                                            <td align="right"> {{formatUnit(item_plan.qty,'UN')}} <span class="unit">CTN</span><br /> {{formatUnit(item_plan.qty_sum,'UN')}} <span class="unit">PCS</span></td>
                                            <td align="right">
                                                {{formatUnit(item_plan.ctn_qty,'UN')}} <span class="unit">PCS/CTN</span> | {{formatUnit(item_plan.ctn_kgs,'KG')}} <span class="unit">KGS/CTN</span><br>
                                                {{item_plan.ctn_size}} <span class="unit">CM</span> | {{formatUnit(item_plan.ctn_m3,'M3')}} <span class="unit">CBM/CTN</span>
                                            </td>
                                            <td align="right">
                                                {{formatUnit(item_plan.m3_sum,'M3')}} <span class="unit">CBM</span><br>
                                                {{formatUnit(item_plan.kgs_sum,'KG')}} <span class="unit">KGS</span>
                                            </td>
                                            <td align="right">
                                                {{formatUnit(item_plan.price,'$')}} <span class="unit">CNY</span><br>
                                                {{formatUnit(item_plan.price_sum,'$')}} <span class="unit">CNY</span>
                                            </td>
                                        </tr>
                                        </tbody>
                                        <tfoot>
                                        <tr>
                                            <td colspan="2" align="center">{:lang('total')}</td>
                                            <td colspan="5" align="right">
                                                <b>
                                                    {:lang("product")}： {{formatUnit(buy_poInfo.plan_sum,'UN')}} <span class="unit">UN</span> /
                                                    {:lang("box_quantity")}： {{formatUnit(buy_poInfo.qty_sum,'UN')}} <span class="unit">CTN</span> /
                                                    {:lang("volume")}： {{formatUnit(buy_poInfo.m3_sum,'M3')}} <span class="unit">CBM</span> /
                                                    {:lang("weight")}： {{formatUnit(buy_poInfo.kgs_sum,'KG')}} <span class="unit">KGS</span> /
                                                    {:lang('amount')}： {{formatUnit(buy_poInfo.price_sum,'$')}} <span class="unit">CNY</span>
                                                </b>
                                            </td>
                                        </tr>
                                        </tfoot>
                                    </table>
                                </div>
                            </div>
                            <!-- 装箱内容 -->
                            <div class="tab-pane col-md-12" id="po_pack">
                                <div class="div-scroll" style="max-height:50vh">
                                    <table class="table table-striped" v-cloak>
                                        <thead>
                                        <tr>
                                            <th>No.</th>
                                            <th>&nbsp;</th>
                                            <th>{:lang("product")}</th>
                                            <th>{:lang("quantity")}</th>
                                            <th>{:lang("box_measure")}</th>
                                            <th>{:lang("volume")}/{:lang("weight")}</th>
                                            <th>{:lang("container")}</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr v-for="(item_plan,index_plan) in buy_poInfo.buy_plan">
                                            <td style="vertical-align:middle" align="center">1</td>
                                            <td style="vertical-align:middle" align="center">
                                                <a :href="'/admin/product/productDetail?request=detail&id='+item_plan.pro_id" target="_blank"><img :src="item_plan.img_url" border="0"></a>
                                            </td>
                                            <td>
                                                <small> {{(item_plan.brand_name ? item_plan.brand_name :'')+ (item_plan.model ? ' / '+item_plan.model :'')}}
                                                </small>
                                                <br />
                                                <a :href="'/admin/product/productDetail?request=detail&id='+item_plan.pro_id" target="_blank">{{item_plan.pro_name}}</a>
                                            </td>
                                            <td align="right"> {{formatUnit(item_plan.qty,'UN')}} <span class="unit">CTN</span><br /> {{formatUnit(item_plan.qty_sum,'UN')}} <span class="unit">PCS</span></td>
                                            <td align="right">
                                                {{formatUnit(item_plan.ctn_qty,'UN')}} <span class="unit">PCS/CTN</span> | {{formatUnit(item_plan.ctn_kgs,'KG')}} <span class="unit">KGS/CTN</span><br>
                                                {{formatUnit(item_plan.ctn_size,'M')}} <span class="unit">CM</span> | {{formatUnit(item_plan.ctn_m3,'M3')}} <span class="unit">CBM/CTN</span>
                                            </td>
                                            <td align="right">
                                                {{formatUnit(item_plan.m3_sum,'M3')}} <span class="unit">CBM</span><br>
                                                {{formatUnit(item_plan.kgs_sum,'KG')}} <span class="unit">KGS</span>
                                            </td>
                                            <td align="right">
                                                NT20158(045)<br>
                                                2019-12-25.L
                                            </td>
                                        </tr>
                                        </tbody>
                                        <tfoot>
                                        <tr>
                                            <td colspan="2" align="center">{:lang('total')}</td>
                                            <td colspan="5" align="right">
                                                <b>
                                                    {:lang("product")}： {{formatUnit(buy_poInfo.plan_sum,'UN')}} <span class="unit">UN</span> /
                                                    {:lang("box_quantity")}： {{formatUnit(buy_poInfo.qty_sum,'UN')}} <span class="unit">CTN</span> /
                                                    {:lang("volume")}： {{formatUnit(buy_poInfo.m3_sum,'M3')}} <span class="unit">CBM</span> /
                                                    {:lang("weight")}： {{formatUnit(buy_poInfo.kgs_sum,'KG')}} <span class="unit">KGS</span> /
                                                </b>
                                            </td>
                                        </tr>
                                        </tfoot>
                                    </table>
                                </div>
                            </div>

                            <!-- 货款付款安排和流水 -->
                            <div class="tab-pane col-md-12" id="po_finance">
                                <div class="row" style="padding-top:1em">
                                    <div class="col-md-6">
                                        <ul class="nav nav-tabs">
                                            <li class="active"><a href="#">货款付款安排</a></li>
                                        </ul>
                                        <table class="table table-striped" v-cloak>
                                            <thead>
                                            <tr>
                                                <th>{:lang("payment_date")}</th>
                                                <th>{:lang("payment_amount")}</th>
                                                <th>百份比</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr v-for="(item_buypoarr,index_buypoarr) in buy_poInfo.buypoarr">
                                                <td>{{item_buypoarr.pay_day}}</td>
                                                <td class="text-right"> <span class="red">{{formatUnit(item_buypoarr.amount,'$')}}</span> <span class="unit">CNY</span></td>
                                                <td class="text-right"> {{formatUnit(item_buypoarr.percent,'%')}}  <span class="unit">%</span></td>
                                            </tr>
                                            </tbody>
                                            <tfoot>
                                            <tr>
                                                <td>{:lang('total')}</td>
                                                <td class="text-right"><span class="red b">{{formatUnit(buy_poInfo.buypoarr_amount,'$')}}</span> <span class="unit">CNY</span></td>
                                                <td>&nbsp;  </td>
                                            </tr>
                                            </tfoot>
                                        </table>

                                        <ul class="nav nav-tabs">
                                            <li class="active"><a href="#">{:lang("other_fee")}</a></li>
                                        </ul>
                                        <table class="table table-striped" v-cloak>
                                            <thead>
                                            <tr>
                                                <th>{:lang('add/alterar_bank_account')}</th>
                                                <th>{:lang('amount')}</th>
                                                <th>{:lang("apportion")}</th>
                                                <th>{:lang("pay_for")}</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr v-for="(item_cost_list,index_cost_list) in buy_poInfo.cost_list">
                                                <td>{{item_cost_list.remarks}}</td>
                                                <td class="text-right"><span class="red">{{formatUnit(item_cost_list.amount,'$')}}</span> <span class="unit">CNY</span></td>
                                                <td align="center">{{item_cost_list.is_apportion}}</td>
                                                <td align="center">{{item_cost_list.replace_pay}}</td>
                                            </tr>
                                            </tbody>
                                            <tfoot>
                                            <tr>
                                                <td>{:lang('total')}</td>
                                                <td class="text-right"><span class="red b">{{formatUnit(buy_poInfo.cost_amount,'$')}}</span> <span class="unit">CNY</span></td>
                                                <td>&nbsp;  </td>
                                                <td>&nbsp;  </td>
                                            </tr>
                                            </tfoot>
                                        </table>
                                    </div>
                                    <div class="col-md-6">
                                        <ul class="nav nav-tabs">
                                            <li class="active"><a href="#">支付流水</a></li>
                                        </ul>
                                        <table class="table table-striped" v-cloak>
                                            <thead>
                                            <tr>
                                                <th>支付日期</th>
                                                <th>{:lang("payment_account")}</th>
                                                <th>{:lang('amount')}</th>
                                                <th>{:lang('edit')}</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr v-for="(item_fin_co2buy_po,index_fin_co2buy_po) in buy_poInfo.fin_co2buy_po">
                                                <td>{{item_fin_co2buy_po.happen_day}}</td>
                                                <td> {{item_fin_co2buy_po.bankname}} / {{item_fin_co2buy_po.account_name}} / {{item_fin_co2buy_po.account_num}}</td>
                                                <td class="text-right"><span class="green">{{formatUnit(item_fin_co2buy_po.amount,'$')}}</span> <span class="unit">CNY</span></td>
                                                <td>{{item_fin_co2buy_po.create_name}}</td>
                                            </tr>
                                            </tbody>
                                            <tfoot>
                                            <tr>
                                                <td>{:lang('total')}</td>
                                                <td>&nbsp;  </td>
                                                <td class="text-right"><span class="green b">{{formatUnit(buy_poInfo.fin_co2buy_po_amount,'$')}}</span> <span class="unit">CNY</span></td>
                                                <td>&nbsp;  </td>
                                            </tr>
                                            </tfoot>
                                        </table>

                                        <ul class="nav nav-tabs">
                                            <li class="active"><a href="#">{:lang('total')}{:lang('add/alterar_bank_account')}</a></li>
                                        </ul>
                                        <table class="table table-striped" v-cloak>
                                            <tbody>
                                            <tr>
                                                <td>收款账号</td>
                                                <td>
                                                    {{ buy_poInfo.content_sum.name ? buy_poInfo.content_sum.name:''}}
                                                    {{buy_poInfo.content_sum.bankname ?  ' / '+buy_poInfo.content_sum.bankname:''}}
                                                    {{buy_poInfo.content_sum.account_name ? ' / '+buy_poInfo.content_sum.account_name : ''}}
                                                    {{buy_poInfo.content_sum.account_num ? ' / '+buy_poInfo.content_sum.account_num : ''}}
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>{:lang("total_payment")}</td>
                                                <td class="text-right"><span class="red b">{{formatUnit(buy_poInfo.buypoarr_amount,'$')}}</span> <span class="unit">CNY</span></td>
                                            </tr>
                                            <tr>
                                                <td>代付费用合计</td>
                                                <td class="text-right"><span class="red b">{{formatUnit(buy_poInfo.cost_amount,'$')}}</span> <span class="unit">CNY</span></td>
                                            </tr>
                                            <tr>
                                                <td>{:lang("total_paid")}</td>
                                                <td class="text-right"><span class="green b">{{formatUnit(buy_poInfo.fin_co2buy_po_amount,'$')}}</span> <span class="unit">CNY</span></td>
                                            </tr>
                                            <tr>
                                                <td>{:lang("total_unpaid")}</td>
                                                <td class="text-right"><span class="blue b">{{formatUnit(buy_poInfo.weifu_sum,'$')}}</span> <span class="unit">CNY</span></td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>

                            <div class="tab-pane col-md-12" id="po_terms">
                                <div class="row" style="padding-top:1em">
                                    <div class="col-md-12">
                                        <ul class="nav nav-tabs">
                                            <li class="active">
                                                <a href="#po_terms_normal" data-toggle="tab">{:lang("general_terms")}</a>
                                            </li>
                                            <li>
                                                <a href="#po_terms_enter" data-toggle="tab">{:lang("delivery_terms")}</a>
                                            </li>
                                            <li>
                                                <a href="#po_terms_pay" data-toggle="tab">{:lang("payment_terms")}</a>
                                            </li>
                                            <li>
                                                <a href="#po_terms_after-sale" data-toggle="tab">{:lang("after_sales_terms")}</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-12 tab-content">
                                        <div class="tab-pane in active" id="po_terms_normal">
                                            <div style="padding:0.5em">
                                                <textarea readonly style="width:100%;height:30vh;" v-cloak>{{buy_poInfo.terms.after_sales_terms.content}}</textarea>
                                            </div>
                                        </div>
                                        <div class="tab-pane" id="po_terms_enter">
                                            <div style="padding:0.5em">
                                                <textarea readonly style="width:100%;height:30vh;" v-cloak>{{buy_poInfo.terms.delivery_terms.content}}</textarea>
                                            </div>
                                        </div>
                                        <div class="tab-pane" id="po_terms_pay">
                                            <div style="padding:0.5em">
                                                <textarea readonly style="width:100%;height:30vh;" v-cloak>{{buy_poInfo.terms.payment_terms.content}}</textarea>
                                            </div>
                                        </div>
                                        <div class="tab-pane" id="po_terms_after-sale">
                                            <div style="padding:0.5em">
                                                <textarea readonly style="width:100%;height:30vh;" v-cloak>{{buy_poInfo.terms.after_sales_terms.content}}</textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="tab-pane" id="po_log">
                                <div class="div-scroll" style="max-height:50vh">
                                    <table class="table table-striped table-hover ntTable" v-cloak>
                                        <thead>
                                        <tr>
                                            <td>时间</td>
                                            <td>{:lang('operate')}</td>
                                            <td>{:lang('content')}</td>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr v-for="(itemlog,indexlog) in buy_poInfo.buy_po_logs">
                                            <td>{{itemlog.happen_at}}</td>
                                            <td>{{itemlog.admin_name}}</td>
                                            <td>{{itemlog.content}}</td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span>{:lang('close')}</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
    </div>

</div>
<div class="modal fade" id="pay_detailModal" tabindex="-2" role="dialog" aria-labelledby="ntModalLabel"
     aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" style="width:1000px">

        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<script language="javascript">
    $(document).ready(function () {
        var lang = $('#lang').text();
        var language = '';
        if (lang == 'pt') {
            language = 'pt-BR';
        } else if (lang == 'en') {
            language = 'en';
        } else {
            language = 'zh-CN';
        }
        // datatimepicker 设置
        $('.form_datetime').datetimepicker({
            language: language, // en ,zh-CN, pt-BR
            format: 'yyyy-mm-dd',
            minView: 'month',
            weekStart: 0, //一周从哪一天开始
            todayBtn: 1, //
            autoclose: 1,
            todayHighlight: 1,
            startView: 2,
            forceParse: 1,
            showMeridian: 1
        });

    });

</script>
<script src="/static/Admin/js/cotwobuy.js"></script>
{include file="public/foot"/}


